<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>大麦商城</title>
<link href="css/common.css" rel="stylesheet" type="text/css"/>
<link href="css/product.css" rel="stylesheet" type="text/css"/>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/damai.js"></script>
</head>
<body>
<div id="app">
	<damai>
		<div class="container productList">


               	<category></category>

				<div class="span18 last">

					<form id="productForm" action="image/蔬菜 - Powered By Mango Team.htm" method="get">
						<input type="hidden" id="brandId" name="brandId" value=""/>
						<input type="hidden" id="promotionId" name="promotionId" value=""/>
						<input type="hidden" id="orderType" name="orderType" value=""/>
						<input type="hidden" id="pageNumber" name="pageNumber" value="1"/>
						<input type="hidden" id="pageSize" name="pageSize" value="20"/>

						<div id="result" class="result table clearfix">
								<ul>
									<li v-for="p in products">
												<a :href="'detail.html?pid=' + p.pid">
													<img :src="p.image" width="170" height="170"  style="display: inline-block;"/>

													<span style='color:green'>
													 {{p.pname}}
													</span>

													<span class="price">
														商城价： ￥{{p.shopPrice}}/份
													</span>

												</a>
									</li>
								</ul>
						</div>

			<div class="pagination">
			第{{pageObj.current}}/{{pageObj.pages}}
				            <template v-for=" i in pageObj.pages">
								<span v-if="i==pageObj.current" class="currentPage" @click="pageObj.current = i;query()">{{i}}</span>
								<a v-else href="#" @click.prevent="pageObj.current=i;query()">{{i}}</a>
							</template>
						<a class="nextPage" href="#" @click.prevent="pageObj.current+=pageObj.current<pageObj.pages?1:0;query()">&nbsp;</a>
						<a class="lastPage" href="#" @click.prevent="pageObj.current=pageObj.pages;query()"></a>

			</div>
					</form>
				</div>
			</div>
	</damai>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data:{
			products:[],
			pageObj:{size:16, current:1, pages:0}
		},
		created(){
			this.query();
		},
		methods:{
			query(){
				//根据小类查询 search:?csid=xxx or ?cid=xxx
				let pageWhere = `&size=${this.pageObj.size}&page=${this.pageObj.current}`;
				if (location.search.indexOf("csid") > 0) {
					//小类查询
					axios.get("product/queryByCsid" + location.search + pageWhere).then(res=>{
						this.pageObj = res.data;
						this.products = this.pageObj.records;
					})
				}else if(location.search.indexOf("cid")>0){
					axios.get("product/queryByCid" + location.search + pageWhere).then(res=> {
						this.pageObj = res.data;
						this.products = this.pageObj.records;
					})
				}
			}
		}
	})
</script>
</body></html>